<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="addProduct-card" style="width: 850px;height: 1100px">
      <div
        style="width: 550px;position: relative;right:-2px;margin-top: 40px;margin: auto;"
      >
        <div>
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="填写商品信息"></el-step>
          <el-step title="填写商品促销"></el-step>
          <el-step title="填写商品属性"></el-step>
          <el-step title="填写商品关联"></el-step>
        </el-steps>
        </div>
        <el-form
          lable-position="right"
          label-width="120px"
          size="small"
          style="margin-top: 50px"
          v-if="active === 0"
        >
          <el-form-item
            label="商品分类："
            style="position: relative;left: -50px"
          >
            <el-cascader
              @change="handleCateChange"
              v-model="productCateValue"
              :options="productCateOptions"
              :props="{ expandTrigger: 'hover', label: 'name', value: 'id' }"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            label="商品名称："
            style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item label="副标题：" style="position: relative;left: -50px">
            <el-input />
          </el-form-item>
          <el-form-item
            label="商品品牌："
            style="position: relative;left: -50px"
          >
            <el-select placeholder="请选择品牌">
              <el-option
                v-for="item in productBrandList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="商品介绍："
            style="position: relative;left: -50px"
          >
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="商品货号："
            style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item
            label="商品售价："
            style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item label="市场价：" style="position: relative;left: -50px">
            <el-input />
          </el-form-item>
          <el-form-item
            label="商品库存："
            style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item
            label="计量单位："
            style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item
            label="商品重量："
            style="position: relative;left: -50px"
          >
            <el-input style="width:60%" /><span style="margin-left: 20px"
              >克</span
            >
          </el-form-item>
          <el-form-item label="排序：" style="position: relative;left: -50px">
            <el-input />
          </el-form-item>
          <el-button
            type="primary"
            size="medium"
            style="margin-top: 12px;margin-left: 142px"
            @click="next"
            >下一步，填写商品促销</el-button
          >
        </el-form>
        <el-form lable-position="right"
                 label-width="120px"
                 size="small"
                 style="margin-top: 50px"
                 v-if="active === 1">
          <el-form-item
                  label="赠送积分："
                  style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item
                  label="赠送成长值："
                  style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item
                  label="积分购买限制："
                  style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item
                  label="预告商品："
                  style="position: relative;left: -50px"
          >
            <template>
            <el-switch
                    style="display: block;margin-top: 4px"
                    v-model= 'value1'
                    active-color="#409EFF"
                    inactive-color="#DCDFE6"
                    >
            </el-switch>
            </template>
          </el-form-item>
          <el-form-item
                  label="商品上架："
                  style="position: relative;left: -50px"
          >
            <template>
              <el-switch
                      style="display: block;margin-top: 4px"
                      v-model= 'value2'
                      active-color="#409EFF"
                      inactive-color="#DCDFE6"
              >
              </el-switch>
            </template>
          </el-form-item>
          <el-form-item
                  label="商品推荐："
                  style="position: relative;left: -50px"
          >
            <template>
              新品
                <span style="margin-left: 69px">推荐</span>
                <el-switch
                        style="display: block;margin-top: -28px;margin-left: 43px"
                        v-model= 'value3'
                        active-color="#409EFF"
                        inactive-color="#DCDFE6"
                >
                </el-switch>
              <el-switch
                      style="display: block;margin-top: -20px;margin-left: 145px"
                      v-model= 'value4'
                      active-color="#409EFF"
                      inactive-color="#DCDFE6"
              >
              </el-switch>
            </template>
          </el-form-item>
          <el-form-item
                  label="服务保证："
                  style="position: relative;left: -50px"
          >
            <template>
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="无忧退货"></el-checkbox>
                <el-checkbox label="快速退款"></el-checkbox>
                <el-checkbox label="免费包邮"></el-checkbox>
              </el-checkbox-group>
            </template>
          </el-form-item>
          <el-form-item
                  label="详细页标题："
                  style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item
                  label="详细页描述："
                  style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item
                  label="商品关键字："
                  style="position: relative;left: -50px"
          >
            <el-input />
          </el-form-item>
          <el-form-item
                  label="商品备注："
                  style="position: relative;left: -50px"
          >
            <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="textarea"
            >
            </el-input>
          </el-form-item>
          <el-form-item
                  label="选择优惠方式："
                  style="position: relative;left: -50px"
          >
            <el-radio-group v-model="labelPosition" size="small" @change="preferentialWay">
              <el-radio-button label="wuYouHui">无优惠</el-radio-button>
              <el-radio-button label="teHui">特惠促销</el-radio-button>
              <el-radio-button label="huiYuan">会员价格</el-radio-button>
              <el-radio-button label="jieTi">阶梯价格</el-radio-button>
              <el-radio-button label="manJian">满减价格</el-radio-button>
            </el-radio-group>
            <div style="margin: 20px;"></div>
            <el-form v-if="labelPosition === 'teHui'" label-width="100px" :model="formLabelAlign" size="small">
              <el-form-item label="开始时间：" style="position: relative;left: -20px;width: 70%">
                <el-input prefix-icon="el-icon-time" placeholder="选择开始时间" v-model="formLabelAlign.name"></el-input>
              </el-form-item>
              <el-form-item label="结束时间：" style="position: relative;left: -20px;width: 70%">
                <el-input prefix-icon="el-icon-time" placeholder="选择结束时间" v-model="formLabelAlign.region"></el-input>
              </el-form-item>
              <el-form-item label="促销价格：" style="position: relative;left: -20px;width: 70%">
                <el-input placeholder="输入促销价格" v-model="formLabelAlign.type"></el-input>
              </el-form-item>
            </el-form>

            <el-form v-if="labelPosition === 'huiYuan'" label-width="100px" :model="formLabelAlign" size="small">
              <el-form-item label="黄金会员：" style="position: relative;left: -20px;width: 70%">
                <el-input v-model="formLabelAlign.name"></el-input>
              </el-form-item>
              <el-form-item label="白金会员：" style="position: relative;left: -20px;width: 70%">
                <el-input v-model="formLabelAlign.region"></el-input>
              </el-form-item>
              <el-form-item label="钻石会员：" style="position: relative;left: -20px;width: 70%">
                <el-input v-model="formLabelAlign.type"></el-input>
              </el-form-item>
            </el-form>

            <el-form v-if="labelPosition === 'jieTi'">
              <el-table
                      :data="tableData"
                      border
                      style="width: 90%">
                <el-table-column
                        prop="date"
                        label="数量"
                        width="130"
                        align="center">
                  <el-input v-model="input" placeholder="请输入内容"></el-input>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="折扣"
                        width="130"
                        align="center">
                  <el-input v-model="input" placeholder="请输入内容"></el-input>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="操作"
                        align="center">
                </el-table-column>
              </el-table>
            </el-form>

            <el-form v-if="labelPosition === 'manJian'">
              <el-table
                      :data="tableData"
                      border
                      style="width: 90%">
                <el-table-column
                        prop="name"
                        label="满"
                        width="130"
                        align="center">
                  <el-input v-model="input" placeholder="请输入内容"></el-input>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="立减"
                        width="130"
                        align="center">
                  <el-input v-model="input" placeholder="请输入内容"></el-input>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="操作"
                        align="center">
                </el-table-column>
              </el-table>
            </el-form>
          </el-form-item>
          <el-button
                  size="medium"
                  style="margin-top: 12px;margin-left: 142px"
                  @click="last"
          >上一步，填写商品信息</el-button
          >
            <el-button
                    type="primary"
                    size="medium"
                    style="margin-top: 12px;margin-left: 142px"
                    @click="next"
            >下一步，填写商品属性</el-button
            >

        </el-form>

      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      active: 0,
        value1: true,
      value2: true,
        value3: true,
        value4: true,
        checkList: [],
        labelPosition: 'left',
        formLabelAlign: {
            name: '',
            region: '',
            type: ''
        },
        tableData: [{}]
    }
  },
  methods: {
      next() {
      if (this.active++ > 3) this.active = 0
      },

      last() {
          if(this.active-- < 0 ) this.active = 0
      },

      preferentialWay(value) {
        console.log('value值为：'+value)
        this.labelPosition = value;
        // this.labelPosition = value
      }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
  margin-top: 20px;
  /*position: relative;*/
  align-items: center;
}

.el-card {
  border: 1px solid #ebeef5;
  border-top-color: rgb(235, 238, 245);
  border-top-style: solid;
  border-top-width: 1px;
  border-right-color: rgb(235, 238, 245);
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-color: rgb(235, 238, 245);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgb(235, 238, 245);
  border-left-style: solid;
  border-left-width: 1px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
}

.form-container {
  position: absolute;
  left: 0;
  right: 0;
  width: 720px;
  padding: 35px 35px 15px;
  padding-top: 35px;
  padding-right: 35px;
  padding-bottom: 15px;
  padding-left: 35px;
  margin: 20px auto;
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
}

.el-card__body {
  padding: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

.addProduct-card {
  width: 400px;
  margin: auto;
  transform: translateY(3%);
  border-radius: 4px;
}
.el-step__title {
  position: relative;
  left: -35px;
  z-index: 100000000;
}
</style>
